<template>
  <div>
    <h2>{{msg}}</h2>
    <h2>{{msg.split("").reverse().join("")}}</h2>
    <h2>computed:{{reMsg}}</h2>
    <h2>method:{{reMsgF()}}</h2>
    <h2>{{ reMsg}}</h2>
    <h2>{{ reMsg}}</h2>
    <h2>{{ reMsgF()}}</h2>
    <h2>{{ reMsgF()}}</h2>
    <input type="text" v-model="msg"/>
  </div>
</template>
<script>
  import { computed,ref,watch } from "vue";
  export default{
    setup(){
      const msg=ref("Hello Vue")
      const reMsg=computed(()=>{
        console.log("computed触发")
        return msg.value.split("").reverse().join("")
      })
      const reMsgF =()=>{
        console.log("methods触发")
        return msg.value.split("").reverse().join('')
      }
      watch(msg,(newValue,oldValue)=>{
        console.log(`旧值是:${oldValue},新值是:${newValue}`)
      })
      return{
        msg,
        reMsg,
        reMsgF
      }
    }
  }
</script>